<script setup>
  import { useRouter } from "vue-router";
  import { useStore } from "vuex";
  import {
    onMounted,
    ref,
    reactive,
    computed,
    watch,
    onBeforeUnmount,
  } from "vue";
  import {
    Form,
    Field,
    CellGroup,
    Button,
    Loading,
    Checkbox,
    Dialog,
  } from "vant";
  const router = useRouter();
  const store = useStore();
  const from = ref(null);
  var internal = null;
  const pageType = ref("firstSure");
  const formdata = ref({
    name: "",
    idCard: "",
  });
  const VerificationTime = ref(0);
  
  const loadings = ref(false);
  
  //点击底部按钮
  const handleFinish = (value) => {
    if (!value.checkbox) {
      Dialog.alert({
        title: "提示",
        message: "请阅读并同意《用户隐私协议》、《车务服务协议》",
      });
      return;
    }
  
    let params = {
      ...value,
      ...formdata,
    };
    //调接口--
    loadings.value = true;
    setTimeout(() => {
      loadings.value = false;
      router.push("/face-page");
    }, 1000);
  };
  
  // 验证码发送
  watch(
    () => VerificationTime.value,
    () => {
      if (VerificationTime.value === 0) {
        clearInterval(internal);
      }
    }
  );
  
  onBeforeUnmount(() => {
    if (internal) {
      clearInterval(internal);
      console.log('定时器销毁');
    }
  });
  
  //点击发送验证码
  const getVerificationCode = () => {
    from.value.validate("tel").then(() => {
      VerificationTime.value = 20;
      // 调接口--发送验证码到手机验证码
      internal = setInterval(() => {
        VerificationTime.value -= 1;
        console.log(VerificationTime.value);
      }, 1000);
    });
  };
  
  //点击跳转阅读协议页
  const handleRead = (e, type) => {
    e.stopPropagation();
    //type-1:用户隐私协议；2-车务服务协议
    console.log(type);
  };
  
  //路由参数切割
  const getPrams = () => {
    let href = window.location.search || "";
    let result = {};
    if (href) {
      href
        .split("?")[1]
        .split("&")
        .forEach((item) => {
          let key = item.split("=")[0];
          let value = item.split("=")[1];
          result[key] = value;
        });
    }
    return result;
  };
  
  onMounted(() => {
    let paramData = getPrams();
    let userInfo = store.state.userInfo;
    setTimeout(() => {
      formdata.value = { ...userInfo };
    }, 200);
  });
  
  //生成带星的文字
  function formatIdCard(str, frontLen, endLen) {
    var len = str.length - frontLen - endLen;
    var xing = "";
    for (var i = 0; i < len; i++) {
      xing += "*";
    }
    return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
  }
  
  //姓名隐藏
  const renderName = computed(() => {
    return formatIdCard(formdata.value.name, 0, formdata.value.name.length - 1);
  });
  //身份证隐藏
  const renderIdCard = computed(() => {
    return formatIdCard(formdata.value.idCard, 0, 4);
  });
  </script>
  
  <template>
    <div class="detail">
      <Form @submit="handleFinish" ref="from">
        <CellGroup inset>
          <Field
            v-model="renderName"
            name="'name"
            label="姓名"
            placeholder="姓名"
            readonly
          />
          <Field
            v-model="renderIdCard"
            name="renderIdCard"
            label="身份证号"
            placeholder="身份证号"
            readonly
          />
          <Field
            v-model="formdata.tel"
            name="tel"
            label="手机号"
            placeholder="手机号"
            :rules="[
              { required: true, message: '请填写手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
            ]"
          />
          <Field
            v-model="formdata.verificationCode"
            name="verificationCode"
            label="短信验证码"
            placeholder="短信验证码"
            :rules="[{ required: true, message: '请填写短信验证码' }]"
          >
            <template #button>
              <Button
                :disabled="VerificationTime"
                size="small"
                type="primary"
                @click="getVerificationCode"
                >{{
                  VerificationTime > 0
                    ? VerificationTime + "秒后重新获取"
                    : "发送验证码"
                }}</Button
              >
            </template>
          </Field>
  
          <Field name="checkbox">
            <template #input>
              <Checkbox v-model="formdata.isread" shape="square">
                同意
                <a
                  @click="handleRead($event, 1)"
                  style="color: rgb(25, 137, 250)"
                >
                  《用户隐私协议》、
                </a>
                <a
                  @click="handleRead($event, 2)"
                  style="color: rgb(25, 137, 250)"
                >
                  《车务服务协议》
                </a>
              </Checkbox>
            </template>
          </Field>
        </CellGroup>
        <div style="text-align: center">
          <Button
            class="finally-btn"
            :loading="loadings"
            type="primary"
            native-type="submit"
            >同意协议并授权</Button
          >
        </div>
      </Form>
    </div>
  </template>
  
  <style lang="less" scoped>
  .cc-page {
    padding: 0 !important;
  }
  .detail {
    .title {
      font-size: 20px;
      font-weight: 700;
      padding: 0 20px 20px;
    }
    .finally-btn {
      width: 80%;
      margin-top: 20px;
      border-radius: 20px;
    }
    .error {
      text-align: center;
      margin-top: 30px;
      font-size: 16px;
    }
  }
  </style>
  